


<script setup>
import {ref, reactive} from 'vue'
// 同时这也意味着当我们将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性：
const state = reactive({ count: 0 })

// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state
n++
console.log("n:" + n)
console.log("state.count:" + state.count)

state.count++ // state.count增加不会让n增加
console.log("state.count:" + state.count)

///////////////////////////////////////////

// test 也和 state.count 失去了响应性连接
let { test } = state
// 不会影响原始的 state
test++
console.log("test: " + test)
///////////////////////////////////////////

// 该函数接收一个普通数字，并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)

function callSomeFunction(para){
    console.log("para:" + para)
}
</script>

<template>
    <!-- 
        模板语法、使用 JavaScript 表达式章节中
        在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
        在文本插值中 (双大括号)
        在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
    -->
    <!-- 双引号里面，能放JS表达式，所以可以加分号，再调用一个方法 -->
    <button @click="state.count++;callSomeFunction(state.count)">增加count</button>

    <p>{{"n: " + n}}</p>
    <p>{{"state.count: " + state.count}}</p>
    <p>{{"test: " + test}}</p>  
</template>